<template>
  <div id="collect">
    <van-nav-bar
      left-text="我的收藏"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />

    <div class="shoplist">
      <div class="shop" v-for="(item,index) in collectlist" :key="index" @click="toDetail(item)">
        <div class="imgbox">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="text">
          <div class="name">{{item.name}}</div>
          <div class="sale"> ☆ {{item.wmPoiScore}} {{item.monthSalesTip}}</div>
          <div class="desc">
            <div class="money">{{item.minPriceTip}} {{item.shippingFeeTip}}</div>
            <div class="time">{{item.deliveryTimeTip}} {{item.distance}}</div>
          </div>
          <div class="infomation" >
            <span v-for="(item,index) in item.discounts2" :key="index">{{item.info}}</span></div>
        </div>
      </div>

      <div v-if="collectlist.length == 0" class="empty">
        未收藏任何店铺,<span @click="$router.push('/index/home')">去逛逛</span>
      </div>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed:{
    ...mapState('collectlist',['collectlist'])
  },
  methods:{
    toDetail(item){
      this.$router.push('/detail/'+item.mtWmPoiId)
    }
  }
}
</script>

<style lang="scss" scoped>

.shoplist{
  margin: 10px;
  .shop{
    display: flex;
    margin: 10px 0;
    height: 100px;
    .imgbox{
      width: 100px;
      height: 100px;
      margin-right: 10px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .text{
      
      font-size: 12px;
      width: 70%;
      .name{
        font-size: 16px;
        font-weight: 600;
      }
      .sale{
        color: red;
        margin: 3px 0;
      }
      .desc{
        color: #959595;
        display: flex;
        margin-bottom: 4px;
        justify-content: space-between;
      }
      .infomation{
        float: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 95%;
        span{
          margin-right: 4px;
          border: red 1px solid;
          border-radius: 2px;
          color: red;
        }
      }
    }
  }

  .empty{
    text-align: center;
    padding: 50px 0;
    span{
        color: red;
    }
  }
}
</style>